<template>
	<view class="card">
		<view class="title" :style="[styleP]">
			<view class="left">{{ titles }}</view>
			<picker v-if="pickerDate != null" @change="bindPickerChange" class="right" :range-key="rangeKey" :range="pickerDate">
				<view class="text">{{ pickerDate[pickerDateIndex][rangeName] }}</view>
				<view class="iconfont icon-xialajiantou"></view>
			</picker>
			<view v-if="tabDate != null" class="tabWar">
				<view v-for="(item, index) in tabDate" :key="index" class="item" :class="{ chose: tabDateIndex == index }" @click="choseFun(index)">{{ item.name }}</view>
			</view>
		</view>
		<view class="content"><slot></slot></view>
	</view>
</template>

<script>
export default {
	name: 'card2',
	props: {
		title: {
			type: String,
			default: ''
		},
		rangeKey: {
			type: String,
			default: 'name'
		},
		rangeName: {
			type: String,
			default: 'name'
		},
		pickerDateIndex: {
			type: Number,
			default: 0
		},
		pickerDate: {
			type: [Object, Array],
			default: () => {
				return null;
			}
		},
		tabDate: {
			type: [Object, Array],
			default: () => {
				return null;
			}
		},
		tabDateIndex: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {};
	},
	computed: {
		titles: function({ title }) {
			return this.deepClone2(title);
		},
		styleP: function({ tabDate }) {
			let value = { padding: '40rpx 0 30rpx 26rpx' };
			if (tabDate != null) {
				value = { padding: '24rpx 0 30rpx 16rpx' };
			}
			return value;
		}
	},
	methods: {
		deepClone2(obj) {
			let _obj = JSON.stringify(obj);
			return JSON.parse(_obj);
		},
		choseFun(event) {
			this.$emit('update:tabDateIndex', event);
		},
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.$emit('update:pickerDateIndex', e.target.value);
		}
	},
	onLoad() {
		console.log(this.title);
	}
};
</script>

<style lang="scss" scoped>
.card {
	padding: 0 30rpx;
	background-color: #ffffff;
	border-bottom: 20rpx solid #f4f4f4;
	&:nth-last-child(1) {
		border-bottom: 0;
	}
	.title {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		position: relative;
		line-height: 1;
		padding: 40rpx 0 30rpx 26rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f4f4f4;
		&::after {
			content: '';
			position: absolute;
			top: calc(50% + 10rpx);
			transform: translateY(-50%);
			left: 0;
			width: 6rpx;
			height: 34rpx;
			background-color: #16d0ff;
		}
		.left {
			min-width: 50%;
		}
		.right {
			flex: 1;
			width: 50%;
			min-width: 50%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			flex-wrap: nowrap;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #658592;
			line-height: 1;
			.iconfont {
				margin-left: 14rpx;
				font-size: 14rpx;
				color: #00a0e9;
			}
		}
	}
	.tabWar {
		width: 400rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-radius: 4rpx;
		overflow: hidden;
		.item {
			box-sizing: border-box;
			width: 50%;
			border: 1rpx solid #88abda;
			text-align: center;
			line-height: 62rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #88abda;
			&.chose {
				color: #ffffff;

				background-color: #88abda;
			}
		}
	}
	.content {
		padding: 30upx 0;
	}
}
</style>
